<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML+CSS实战项目入门级企业官网-首页</title>
  <link rel="stylesheet" href="./styles/reset.min.css">
  <link rel="stylesheet" href="./styles/case.min.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4763580_3ewk9f8xtmu.css">
</head>

<body>
  <div id="app">
    <!-- 头部版块 -->
    <div class="header">
      <div class="wrapper">
        <div class="left">
          <a href="./index.html">
            <img src="./images/logo_white.png" class="logo">
          </a>
        </div>
        <div class="right">
          <ul class="nav">
            <li class="nav-item"><a href="./index.html">首页</a></li>
            <li class="nav-item active"><a href="./case.html">最新案例</a></li>
            <li class="nav-item"><a href="./about.html">关于我们</a></li>
            <li class="nav-item"><a href="./concat.html">联系我们</a></li>
          </ul>
        </div>
        <div class="collapse">
          <i class="iconfont icon-qita"></i>
          <ul class="nav">
            <li class="nav-item"><a href="./index.html">首页</a></li>
            <li class="nav-item active"><a href="./case.html">最新案例</a></li>
            <li class="nav-item"><a href="./about.html">关于我们</a></li>
            <li class="nav-item"><a href="./concat.html">联系我们</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 横幅版块 -->
    <div class="banner">
      <div class="content">
        <div class="title">独具匠心 专注品质</div>
        <div class="slogan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eaque, provident quibusdam
          reprehenderit architecto rem repellat quis mollitia dolore maxime.</div>
      </div>
    </div>
    <!-- 案例展示版块 -->
     <div class="cases-show">
      <div class="wrapper">
        <div class="title">案例展示</div>
        <ul class="content">
          <li class="cases-item">
            <img src="./images/pic4.jpg" alt="">
            <div>自由创意</div>
          </li>
          <li class="cases-item">
            <img src="./images/pic1.jpg" alt="">
            <div>自由创意</div>
          </li>
          <li class="cases-item">
            <img src="./images/pic2.jpg" alt="">
            <div>自由创意</div>
          </li>
          <li class="cases-item">
            <img src="./images/pic3.jpg" alt="">
            <div>自由创意</div>
          </li>
          <li class="cases-item">
            <img src="./images/pic1.jpg" alt="">
            <div>自由创意</div>
          </li>
          <li class="cases-item">
            <img src="./images/pic3.jpg" alt="">
            <div>自由创意</div>
          </li>
        </ul>
      </div>
     </div>
    <!-- 尾部版块 -->
    <div class="footer">
      <div class="wrapper">
        <div class="title">联系我们</div>
        <div class="content">
          <div class="left">
            <ul class="qrcodes">
              <li class="qrcodes-item">
                <img src="./images/qrcode.jpg" alt="">
                <div>关注公众号</div>
              </li>
              <li class="qrcodes-item">
                <img src="./images/qrcode.jpg" alt="">
                <div>下载APP</div>
              </li>
            </ul>
            <ul class="links">
              <li class="links-item">QQ：2820XXXXXX</li>
              <li class="links-item">邮箱：2820XXXXXX@qq.com</li>
              <li class="links-item">微博：XXX</li>
              <li class="links-item">地址：湖南省长沙市XX区XX路XX号</li>
            </ul>
          </div>
          <div class="phone">
            <i class="iconfont icon-dianhua"></i>
            <span>152XXXXXXXX</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 版权版块 -->
     <div class="copyright">
      <div class="wrapper">Copyright &copy; 2024 XXX版权所有</div>
     </div>
  </div>
</body>
<script>
  const iconQita = document.querySelector('.icon-qita')
  const nav = document.querySelector('.collapse .nav')
  iconQita.addEventListener('click', function() {
    nav.style.opacity = nav.style.opacity === '0' ? '1' : '0'
  })
</script>
</html>